<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>最新舆情分析</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }

        .top-panel>.layui-card-body {
            height: 60px;
        }

        .top-panel-number {
            line-height: 60px;
            font-size: 30px;
            border-right: 1px solid #eceff9;
        }

        .top-panel-tips {
            line-height: 30px;
            font-size: 12px
        }
    </style>
</head>

<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <div class="layui-row layui-col-space15">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">时间段:</label>
                            <div class="layui-input-inline">
                                <input type="text" name="date" id="date" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="search"><i
                                    class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-xs12 layui-col-md3">

                    <div class="layui-card top-panel">
                        <div class="layui-card-header">累计的舆情总数</div>
                        <div class="layui-card-body">
                            <div class="layui-row layui-col-space5">
                                <div class="layui-col-xs9 layui-col-md9 top-panel-number" id="all_count">
                                    0
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="layui-col-xs12 layui-col-md3">

                    <div class="layui-card top-panel">
                        <div class="layui-card-header">微博数据</div>
                        <div class="layui-card-body">
                            <div class="layui-row layui-col-space5">
                                <div class="layui-col-xs9 layui-col-md9 top-panel-number" id="weibo_count">
                                    0
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="layui-col-xs12 layui-col-md3">

                    <div class="layui-card top-panel">
                        <div class="layui-card-header">贴吧数据</div>
                        <div class="layui-card-body">
                            <div class="layui-row layui-col-space5">
                                <div class="layui-col-xs9 layui-col-md9 top-panel-number" id="tieba_count">
                                    0
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="layui-row layui-col-space15">
                <div class="layui-col-xs12 layui-col-md9">
                    <div id="echarts1" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                </div>
                <div class="layui-col-xs12 layui-col-md3">
                    <div id="echarts2" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                </div>
            </div>


            <div class="layui-row layui-col-space15">
                <div class="layui-col-xs12 layui-col-md12">
                    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
                </div>
            </div>

        </div>
    </div>
    <script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script>
        layui.use(['layer', 'echarts', 'form', 'table', 'laydate'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                echarts = layui.echarts;
            laydate = layui.laydate;
            table = layui.table;
            form = layui.form;

            // 监听搜索操作
            form.on('submit(search)', function (data) {
                date = data.field.date
                console.log(date)
                dates = date.split(" - ")
                getAllCount(dates[0], dates[1])
                loadecharts(dates[0], dates[1])
                loadTable(dates[0], dates[1])
                return false;
            });

            start_date = getDay(-7)
            end_date = getDay(0)
            laydate.render({
                elem: '#date' //指定元素
                , range: true
                , max: 0
                , format: 'yyyy-MM-dd'
                , value: start_date + ' - ' + end_date
            });

            getAllCount(start_date, end_date)
            loadTable(start_date, end_date)
            loadecharts(start_date, end_date)



            function getDay(day) {
                var today = new Date();
                var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
                today.setTime(targetday_milliseconds); //注意，这行是关键代码
                var tYear = today.getFullYear();
                var tMonth = today.getMonth();
                var tDate = today.getDate();
                tMonth = doHandleMonth(tMonth + 1);
                tDate = doHandleMonth(tDate);
                return tYear + "-" + tMonth + "-" + tDate;
            }

            function doHandleMonth(month) {
                var m = month;
                if (month.toString().length == 1) {
                    m = "0" + month;
                }
                return m;
            }

            function getAllCount(start_time, end_time) {
                // 查询统计数
                $.ajax({
                    type: "get",
                    async: false,
                    url: "/api/business/getAllCount/?start_time=" + start_time + "&end_time=" + end_time,
                    success: function (result) {
                        if (result.code = 200) {
                            data = result.data;
                            $("#all_count").text(data.all_count)
                            $("#weibo_count").text(data.weibo_count)
                            $("#tieba_count").text(data.tieba_count)
                        } else {
                            layer.msg(result.msg);
                        }
                    },
                    error: function (result) {
                        layer.msg("系统异常");
                    }
                });
            }

            function loadTable(start_time, end_time) {
                table.render({
                    elem: '#currentTableId',
                    url: '/api/business/getLastYuqing/',
                    cols: [[
                        {
                            field: 'title',
                            minwidth: 600,
                            title: '标题',
                            templet: function (d) {
                                return `<a href="${d.link}" target="_blank" style="color:blue;text-decoration:underline;">${d.title}</a>`;
                            }
                        },
                        { field: 'type', width: 200, title: '来源' },
                        { field: 'creator', width: 200, title: '发布人' },
                        { field: 'create_time', width: 200, title: '发布时间' },
                    ]],
                    where: {
                        'start_time': start_time,
                        'end_time': end_time
                    },
                    limits: [5, 10, 15],
                    limit: 5,
                    page: true
                });
            }



            function loadecharts(start_time, end_time) {
                /**
                 * 报表功能
                 */
                var echartsRecords = echarts.init(document.getElementById('echarts1'), 'walden');

                xAxis = []
                weibo_list = []
                tieba_list = []
                // 查询趋势图
                $.ajax({
                    type: "get",
                    async: false,
                    url: "/api/business/getYuqingByTime/?start_time=" + start_time + "&end_time=" + end_time,
                    success: function (result) {
                        if (result.code = 200) {
                            data = result.data;
                            xAxis = data.xAxis
                            weibo_list = data.weibo_list
                            tieba_list = data.tieba_list
                        } else {
                            layer.msg(result.msg);
                        }
                    },
                    error: function (result) {
                        layer.msg("系统异常");
                    }
                });

                var optionRecords = {
                    title: {
                        text: '高校网络舆情趋势'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['微博', '贴吧']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '6%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: xAxis
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '微博',
                            type: 'line',
                            data: weibo_list
                        },
                        {
                            name: '贴吧',
                            type: 'line',
                            data: tieba_list
                        }
                    ]
                };
                echartsRecords.setOption(optionRecords);


                /**
                 * 玫瑰图表
                 */
                var echartsPies = echarts.init(document.getElementById('echarts2'), 'walden');
                data = []
                // 查询来源分布
                $.ajax({
                    type: "get",
                    async: false,
                    url: "/api/business/getYuqingMap/?start_time=" + start_time + "&end_time=" + end_time,
                    success: function (result) {
                        if (result.code = 200) {
                            data = result.data.series;
                        } else {
                            layer.msg(result.msg);
                        }
                    },
                    error: function (result) {
                        layer.msg("系统异常");
                    }
                });
                var optionPies = {
                    title: {
                        text: '高校舆情分布',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['微博', '贴吧']
                    },
                    series: [
                        {
                            name: '舆情来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                console.log(optionPies)
                echartsPies.setOption(optionPies);

                // echarts 窗口缩放自适应
                window.onresize = function () {
                    echartsRecords.resize();
                    echartsPies.resize();
                }
            }



        });
    </script>
</body>

</html>